<!--车辆管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆管理</span>
    <el-button @click="dialogVisible=true" type="primary" style="float:right;margin-top:13px;">新增车辆</el-button>
  </div>


  <!-- 新增车辆弹窗 before-close="handleCloseDialog"表示弹窗关闭之前先执行handleCloseDialog()方法进行确认(避免点击弹窗外部也关闭弹窗)-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;" :before-close="handleCloseDialog">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆品牌"><!--v-model="saveVehicleForm.brand"是双向绑定-->
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.brand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆牌号">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.license"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆型号">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.model"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆识别码">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆排量"><!--displacement是排量-->
            <el-select placeholder="请选择" v-model="saveVehicleForm.displacement">
              <el-option label="1.6" value="1"></el-option>
              <el-option label="2.5" value="2"></el-option>
              <el-option label="4" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆类型">
            <el-select placeholder="请选择"  v-model="saveVehicleForm.type">
              <el-option label="轿车" value="10"></el-option>
              <el-option label="货车" value="20"></el-option>
              <el-option label="客车" value="30"></el-option>
              <el-option label="挂车" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车身颜色" >
            <el-select placeholder="请选择"  v-model="saveVehicleForm.color">
              <el-option label="黑" value="10"></el-option>
              <el-option label="白" value="20"></el-option>
              <el-option label="蓝" value="30"></el-option>
              <el-option label="灰" value="40"></el-option>
              <el-option label="银" value="50"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="里程数">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.kilometers"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="购买时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveVehicleForm.buyTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上牌时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveVehicleForm.regTime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="购买价格">
            <el-input placeholder="请输入内容" v-model="saveVehicleForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电池类型">
            <el-select placeholder="请选择" v-model="saveVehicleForm.batteryType">
              <el-option label="铅酸蓄电池" value="10"></el-option>
              <el-option label="镍氢电池" value="20"></el-option>
              <el-option label="钠硫电池" value="30"></el-option>
              <el-option label="二次锂电池" value="40"></el-option>
              <el-option label="空气电池" value="50"></el-option>
              <el-option label="三元锂电池" value="60"></el-option>
              <el-option label="碱性燃料电池" value="70"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary" @click="saveOrUpdateVehicleFormMethod">确定</el-button>
    </template>
  </el-dialog>




  <!-- 车辆搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="车辆品牌">
        <el-input placeholder="请输入车辆品牌" style="width:220px;"
                  @keydown.enter="loadVehicleList" @blur.native.capture="loadVehicleList" v-model="searchVehicleForm.brand"></el-input>
      </el-form-item>      <!--  @blur.native.capture="loadVehicleList"表示失去焦点事件  -->
      <el-form-item label="车牌号" style="width:290px;">
        <el-input placeholder="请输入车牌" style="width:220px;"
                  @keydown.enter="loadVehicleList" @blur.native.capture="loadVehicleList" v-model="searchVehicleForm.license"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearchVehicleForm">重置</el-button>
        <el-button type="primary" @click="loadVehicleList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>




  <!-- 车辆列表 -->
  <el-card style="margin:20px;">
    <el-table :data="vehicleArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="brand" label="车辆品牌" align="center"/>
      <el-table-column prop="license" label="车牌号" align="center"/>
      <el-table-column prop="code" label="车辆识别码" align="center"/>
      <!--  :formatter="vehicleTypeFormatter"用于指定车辆类型转化的方法 (为了让页面在车辆类型位置，显示文字信息(而不是显示数字信息)) -->
      <el-table-column prop="type" label="车辆类型" align="center" :formatter="vehicleTypeFormatter"/>
      <el-table-column prop="price" label="购买价格" align="center"/>
      <el-table-column prop="buyTime" label="购买时间" align="center"/>
      <el-table-column prop="regTime" label="上牌时间" align="center"/>
      <el-table-column prop="batteryType" label="电池类型" align="center" :formatter="batteryTypeFormatter"/>
      <el-table-column prop="status" label="车辆状态" align="center" :formatter="vehicleStatusFormatter"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editVehicle(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteVehicle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增车辆');

//定义数组保存车辆列表信息
const vehicleArr = ref([]);

//定义对象保存查询条件 :品牌 车牌号
const searchVehicleForm= ref({brand:'',license:''});

//定义查询车辆信息的表单清空的响应式方法resetSearchVehicleForm()
const resetSearchVehicleForm=()=>{
  //将查询车辆的表单信息清空
  searchVehicleForm.value={};
  //重新加载所有的用户数据
  loadVehicleList();
};

//定义加载车辆列表的方法
const loadVehicleList = ()=>{
  //以查询字符串的格式打印用户输入的搜索条件
  let searchVehicle=qs.stringify(searchVehicleForm.value);
  console.log(searchVehicle);
  axios.get(BASE_URL+'/v1/vehicle/selectVehicles?'+searchVehicle).then( (response)=>{
    if(response.data.code==2000){
      vehicleArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  });
};

//定义一个车辆类型 文字转换的转化器(将数字转化为文字显示)
//为了让页面在车辆类型位置，显示文字信息(而不是显示数字信息)
//row: 行，  column列,  index编号
//cellValue: 单元格的值
const  vehicleTypeFormatter=(row, colimn, cellValue, index)=>{
  if(cellValue==10){
    cellValue='货车';
  }else if(cellValue==20){
    cellValue='轿车';
  }else if(cellValue==30){
    cellValue='客车';
  }else if(cellValue==40){
    cellValue='挂车';
  }
  return cellValue;
};



//定义一个车辆状态 文字转换的转化器(将数字转化为文字显示)
//为了让页面在车辆状态位置，显示文字信息(而不是显示数字信息)
//row: 行，  column列,  index编号
//cellValue: 单元格的值
const  vehicleStatusFormatter=(row, colimn, cellValue, index)=>{
  if(cellValue==1){
    cellValue='空闲';
  }else if(cellValue==2){
    cellValue='占用';
  }
  return cellValue;
};

//定义一个电池类型 文字转换的转化器(将数字转化为文字显示)
//为了让页面在电池类型位置，显示文字信息(而不是显示数字信息)
//row: 行，  column列,  index编号
//cellValue: 单元格的值
const  batteryTypeFormatter=(row, colimn, cellValue, index)=>{
  if (cellValue==10){
    cellValue= '铅酸蓄电池';
  }else if (cellValue==20){
    cellValue= '镍氢电池';
  }else if (cellValue==30){
    cellValue= '钠硫电池';
  }else if (cellValue==40){
    cellValue= '二次锂电池';
  }else if (cellValue==50){
    cellValue= '空气电池';
  }else if (cellValue==60){
    cellValue= '三元锂电池';
  }else if (cellValue==70){
    cellValue= '碱性燃料电池';
  }
  return cellValue;
};

//准备对象用来收集新增/修改车辆的表单信息
const saveVehicleForm = ref({
  brand:'',
  license:'',
  model:'',
  code:'',
  displacement:'',
  type:'',
  color:'',
  kilometers:'',
  buyTime:'',
  regTime:'',
  price:'',
  batteryType:''
});

//定义保存新增或修改车辆信息的响应式方法saveVehicleFormMethod()
const saveOrUpdateVehicleFormMethod=()=>{
  let data_saveVehicleForm=qs.stringify(saveVehicleForm.value);
  axios.post(BASE_URL+'/v1/vehicle/saveOrUpdateVehicle',data_saveVehicleForm).then((response)=>{
    if(response.data.code==2000){
      //ElMessage.success("新增车辆成功");
      ElMessage.success(response.data.msg);
      //注意： 保存车辆信息成功后，需要清空弹窗表单中的数据， 还需要关闭弹窗，还要重新加载车辆列表页面的所有数据
      //需要清空弹窗表单中的数据
      saveVehicleForm.value={};
      //关闭弹窗
      dialogVisible.value=false;
      //重新加载车辆列表页面的所有数据
      loadVehicleList();
    }else{
      ElMessage.error(response.data.msg);
      //大多数后端返回一个异常信息的原因就是数据库里的code和license字段设置了唯一,如果重复会操作失败,
      //所以我们在前端页面接受到后端返回的异常信息时，可以设置提示语句'车牌号或车辆识别码不允许重复!'
      ElMessage.error('车牌号或车辆识别码不允许重复!');
    }
  });
  console.log(data_saveVehicleForm);
};


//定义确认关闭弹窗的响应式方法handleCloseDialog()//handle是处理的意思
const handleCloseDialog=()=>{
  //1.确认是否关闭
  if(confirm('确认要关闭新增车辆的窗口吗？')){
    //用户如果确认关闭，就关闭弹窗
    dialogVisible.value=false;
    //清空已输入的表单数据
    //如果用户关闭了弹窗，则同时要将弹窗中的数据同时清空，否则下次进入弹窗时还会显示这些数据
    //(因为弹窗中的每个输入框和saveVehicleForm进行了双向绑定)
    saveVehicleForm.value={};
  }
};

//定义用于修改车辆信息时， 将车辆信息查询并显示到弹窗表单中的响应式方法editVehicle()
//加载后再表单中提交，提交后通过公用新增车辆的方法saveOrUpdateVehicleFormMethod()来完成修改操作
const editVehicle=(vehicleId)=>{
  //1. 显示弹窗
  dialogVisible.value=true;
  //2. 修改弹窗标题
  dialogTitle.value='修改车辆信息';
  //3. 查询当前要编辑的此条车辆的数据
  axios.get(BASE_URL+'/v1/vehicle/selectVehicles?id='+vehicleId).then((response)=>{
    if(response.data.code==2000){
      //4. 将数据回显在弹窗表单中,注意后端返回的是一个list所以是data[0]!!!
      saveVehicleForm.value=response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  });
};

const deleteVehicle=(vehicleId)=>{
  axios.get(BASE_URL+'/v1/vehicle/deleteVehicle/'+vehicleId).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success("删除车辆成功");
      loadVehicleList();
    }else{
      ElMessage.error(response.data.msg);
    }
  });
};

//表示已进入到Vehicle.vue页面，就执行onMounted();                 电子围栏管理-1
onMounted(()=>{
  loadVehicleList();
});

</script>